Summary

New Compare toolbar button puts mobile (390×844), tablet (768×1024), and desktop (canvas natural width/height) iframes side by side in the viewport area. Each iframe loads through the per-breakpoint render route added in PR #13, so the reflow is real — not a CSS-scaled snapshot of the desktop layout.

How it works

• setCompareMode() puts the .viewport element in a compare class. CSS hides the single #frame and reveals .compare-grid.
• setViewport() removes the compare class so the toggle is mutually exclusive with the single-breakpoint modes.
• Auto-refresh now goes through a refreshFrames() helper that picks the right iframe(s) based on current mode.
• Each cell uses CSS transform: scale() with --bp-w / --bp-h / --scale variables so the iframe renders at the true viewport size but presents at a fraction of that pixel area. Default scale is 0.35 (~960px total at desktop chrome width); media queries drop it to 0.28 / 0.22 / 0.18 on narrower viewers.
• Fit button is dimmed in compare mode where it doesn't apply.
• renderDetailPage is now exported so the smoke can render it directly without spinning up the HTTP server (which tends to cache stale code across long-running tsx processes — observed today).

Test plan

• npm run build clean
• npx tsx test-viewer-compare.ts → 11/11 pass
  • 9 markup checks (Compare button, compare-grid container, three iframe srcs pointing at the per-breakpoint route, the JS handlers, the CSS hooks)
  • 2 runtime checks via puppeteer (initial: single iframe visible, grid hidden; after #bp-compare click: grid visible with 3 cells, single hidden, button marked active)
• test-fluid-widths, test-default-font, test-root-centering, test-ops-parser, test-guidelines, test-responsive-reflow all still pass — no regression on PRs Phase 5: responsive hint API + renderer mapping (items #1+#2) #6-13

Out of scope

• Per-breakpoint label customization, persistent layout preference, or a "Compare + Diff" mode pairing this with canvas_diff — natural follow-ups, kept separate.